<template>
  <div class="job">
    <div class="filterBox">
      <van-dropdown-menu active-color="#4771DC" z-index="1">
        <van-dropdown-item class="frontPop" get-container="body" v-model="cityid"
                           :options="filterCity" @change="changeList"/>
        <van-dropdown-item class="frontPop" get-container="body" v-model="eid"
                           :options="filterEid"
                           @change="changeList"/>
        <van-dropdown-item class="frontPop" get-container="body" v-model="posttypeid"
                           :options="filterPosttype" @change="changeList"/>
        <van-dropdown-item class="frontPop" get-container="body" v-model="attrid"
                           :options="filterAttr" @change="changeList"/>
        <van-dropdown-item class="frontPop" get-container="body" v-model="industryid"
                           :options="filterIndustry" @change="changeList"/>
      </van-dropdown-menu>
    </div>
    <job-list v-if="list.length>0" :list="list" :finished.sync="finished" :loading.sync="loading"
              @toFetch="toFetch"/>
    <div class="noData" v-else-if="list.length===0">
      <p>{{finished ? '暂无数据' : '加载中...'}}</p>
      <div class="img-box">
        <img src="../../assets/images/work.png">
      </div>
    </div>
  </div>
</template>

<script>
import JobList from '@/components/job/job-list'
import { getJobList } from '@/api/company'

export default {
  components: { JobList },
  name: 'Job',
  data () {
    return {
      cityid: '',
      is_all: '',
      eid: '',
      posttypeid: '',
      attrid: '',
      industryid: '',
      keywords: '',
      filterCity: [
        { text: '城市', value: '' },
      ],
      filterEid: [
        { text: '学历', value: '' },
      ],
      filterPosttype: [
        { text: '岗位', value: '' },
      ],
      filterAttr: [
        { text: '性质', value: '' },
      ],
      filterIndustry: [
        { text: '行业', value: '' },
      ],
      filter: {},
      list: [],
      pageNo: 1,
      sort: 1,
      loading: false,
      finished: false,
      refreshing: false,
    }
  },
  watch: {
    '$route' (val) {
      this.keywords = this.$route.query.keywords || ''
      this.changeList()
    },
  },
  created () {
    this.keywords = this.$route.query.keywords || ''
    this.fetchData()
  },
  mounted () {
  },
  methods: {
    changeList () {
      this.list = []
      this.pageNo = 1
      this.finished = false
      this.fetchData()
    },
    formatterList (list) {
      return list.map(s => {
        return { text: s.name, value: s.id }
      })
    },
    formatterFilter (obj) {
      this.filterCity.push(...this.formatterList(obj.city))
      this.filterEid.push(...this.formatterList(obj.edu))
      this.filterPosttype.push(...this.formatterList(obj.postType))
      this.filterAttr.push(...this.formatterList(obj.attr))
      this.filterIndustry.push(...this.formatterList(obj.industry))
    },
    toFetch () {
      this.fetchData()
    },
    fetchData () {
      getJobList({
        cityid: this.cityid,
        is_all: this.is_all,
        eid: this.eid,
        posttypeid: this.posttypeid,
        attrid: this.attrid,
        industryid: this.industryid,
        sort: this.sort,
        keywords: this.keywords,
        page: this.pageNo++,
      }).then(res => {
        this.loading = false
        if (res.code === 200) {
          let timer = setTimeout(() => {
            res.data.data && this.list.push(...res.data.data)
            if(this.pageNo === 2) {
              res.data.search && this.formatterFilter(res.data.search)
            }
            if (this.list.length >= res.data.count) {
              this.finished = true
            } else {
              this.finished = false
            }
            clearTimeout(timer)
            timer = null
          }, 800)
        } else {
          this.pageNo--
          this.finished = true
        }
      }).catch(err => {
        this.loading = false
        this.pageNo--
        console.error(err)
      })
    },
  },
}
</script>

<style lang="stylus" scoped>
.job {

  .filterBox {
    position: fixed;
    top: 55px;
    left: 0;
    width: 100%;
    z-index: 10;
  }

  .job-list {
    margin-top: 45px;
    height: calc(100vh - 45px - 55px);
  }
}
</style>

